<template>
  <div class="container">
    <el-card style="margin:10px">
      <!-- 面包屑 -->
      <div class="tag-breadcrumb" v-if="queryInfo.id">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ queryInfo.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-row type="flex">
        <!-- 头部输入框 -->
        <el-col :span="18">
          <el-form
            ref="tagRef"
            :inline="true"
            :model="tagPage"
            class="demo-form-inline"
          >
            <el-form-item
              label="标签名称"
              style="margin-right:50px"
              prop="tagName"
            >
              <el-input
                v-model="tagPage.tagName"
                placeholder="请输入标签名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="tagPage.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="btnRemove" size="small">清除</el-button>
              <el-button type="primary" @click="btnSearch" size="small"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button
              v-if="queryInfo.id"
              type="text"
              class="el-icon-back"
              @click="$router.push('/subjects/list')"
              >返回学科</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="addBtn"
              >新增标签</el-button
            ></el-row
          >
        </el-col>
      </el-row>
      <!-- 提示消息 -->
      <el-alert
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom:10px"
        class="tags-alert"
      >
        <span>数据一共{{ total }}条</span>
      </el-alert>
      <!-- 表格部分 -->
      <el-table v-loading="loading" :data="tagList" style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="所属学科"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" prop="tagName" label="标签名称">
        </el-table-column>
        <el-table-column align="center" prop="username" label="创建者">
        </el-table-column>
        <el-table-column
          align="center"
          prop="addDate"
          label="创建日期"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          :formatter="formatTag"
          label="状态"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              @click="changeBtn(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              @click="btnDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:30px">
        <el-pagination
          background
          layout="prev,pager,next,sizes,jumper"
          :total="total"
          :current-page="tagPage.page"
          :page-size="tagPage.pagesize"
          :page-sizes="[3, 5, 10, 15]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination
      ></el-row>
    </el-card>
    <!-- 新增的弹出层 -->
    <tag-add
      v-if="tagAddisShow"
      :dialog-table-visible.sync="tagAddisShow"
      :sbj-list="sbjList"
      :query-info="queryInfo"
      @addTagOK="getTagList"
    ></tag-add>
    <!-- 编辑的弹出层 -->
    <tag-edit
      v-if="tagEditisShow"
      :dialog-table-visible.sync="tagEditisShow"
      :sbj-list="sbjList"
      :change-info="changeInfo"
      :query-info="queryInfo"
      @addTagOK="getTagList"
    ></tag-edit>
  </div>
</template>

<script>
import { tagList, changeState, tagDel } from '@/api/hmmm/tags.js'
import dayjs from 'dayjs'
import tagAdd from '../components/tags-add.vue'
import tagEdit from '../components/tags-edit.vue'
import { sbjSimpleList } from '@/api/hmmm/subjects'
export default {
  components: {
    tagAdd,
    tagEdit
  },
  data() {
    return {
      queryInfo: {}, // 获取地址栏路由传递过来的参数
      tagAddisShow: false, // 添加de弹出层
      tagEditisShow: false, // 编辑模块的
      loading: false,
      sbjList: [], // 学科简单列表
      tagPage: {
        // 获取标签参数
        page: 1, // 当前页
        pagesize: 10, // 每页大小
        subjectID: null,
        tagName: null,
        state: null
      },
      tagList: [], // 标签列表
      total: 0, // 标签总数
      // pages: 0 // 总页数
      changeInfo: {} // 点击修改获取的数据
    }
  },
  created() {
    this.getTagList()
    this.sbjSimpleList() // 获取学科简单列表
    this.queryInfo = this.$route.query
    if (this.queryInfo.id) {
      // 判断是否是从其他页面跳转而来
      // 拿到跳转过来的id，进行数据筛选渲染
      this.tagPage.subjectID = this.queryInfo.id
      this.getTagList()
    }
  },
  methods: {
    btnSearch() {
      this.getTagList()
    },
    btnRemove() {
      // 搜索框的清除按钮
      this.$refs.tagRef.resetFields()
    },
    handleSizeChange(newSize) {
      // 修改每页显示的条数
      this.tagPage.pagesize = newSize
      this.getTagList()
    },
    handleCurrentChange(newPage) {
      // 翻页
      this.tagPage.page = newPage // 赋值最新页码
      this.getTagList() // 获取第二页数据
    },
    async handleClick(row) {
      // 更改状态
      try {
        await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
        row.state = row.state === 1 ? 0 : 1
        this.$message.success('修改状态成功')
      } catch (error) {
        this.$message.error('修改状态失败')
      }
    },
    changeBtn(row) {
      // 修改标签按钮
      this.tagEditisShow = true
      this.changeInfo = row
    },
    btnDel(row) {
      // 删除数据
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await tagDel(row)
            this.$message.success('删除成功!')
            this.getTagList()
          } catch (error) {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async getTagList() {
      this.loading = true
      // 获取标签列表
      try {
        const { data } = await tagList(this.tagPage)
        data.items.forEach(item => {
          // 格式化时间
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        })
        // console.log(data)
        this.total = data.counts
        // this.pages = data.pages
        this.tagList = data.items
      } catch (error) {
        this.$message.error('获取标签列表失败！')
      }
      this.loading = false
    },
    formatTag(row, column, cellValue, index) {
      return cellValue === 1 ? '启用' : '禁用'
    },
    addBtn() {
      this.tagAddisShow = true
    },
    async sbjSimpleList() {
      // 获取学科简单列表
      const { data } = await sbjSimpleList()
      this.sbjList = data
    }
  }
}
</script>

<style scoped lang="scss">
.tag-breadcrumb {
  padding-bottom: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.tags-alert {
  span {
    font-size: 15px;
  }
  ::v-deep .el-icon-info {
    font-size: 18px;
  }
}
</style>
